<template>
	
	<view class='main'>
	  <view class='tab'>
	    <view @click='tabFun(0)' >
	      <text :class="[tabIndex==0?'active':'']">全部</text>
	    </view>
	    <view @click='tabFun(1)' >
	      <text :class="[tabIndex==1?'active':'']">待确认</text>
	    </view>
	    <view @click='tabFun(2)' >
	      <text :class="[tabIndex==2?'active':'']">待发货</text>
	    </view>
	    <view @click='tabFun(3)' >
	      <text :class="[tabIndex==3?'active':'']">已发货</text>
	    </view>
	    <view @click='tabFun(4)' >
	      <text :class="[tabIndex==4?'active':'']">已完成</text>
	    </view>
	  </view>
	
	  <view class="divider-order"></view>
	  
	  <view v-if="list.length == 0" class="empty-cart">此项订单为空</view>
	  
	  <scroll-view v-else scroll-y class="list" refresher-enabled="true"
	  refresher-threshold="30" :refresher-triggered="triggered" @refresherrefresh="onScrollRefresh" >
								
	    <block v-for="(item,index) in list" :key="index" >
	      
	      <view class='item' @click="showDetail(index)">
			<view class="flex-wrap flex-direction-row">
	          <view class='time'>下单时间: {{ item.ctime*1000 | formatDate}}</view>
	          <image v-if="item.status == 2" @click.stop="del(item.id)" class="delete" src="../../../static/delete.png"/>
	        </view>
	        <view class="flex-wrap flex-direction-row">
	          <image class="goodsimg" :src='item.order[0].goodsImages.path || "https://cgt.weikedashi.net/cgt/default.png"'></image>
			  <image v-if="item.order.length>1" class="goodsimg" :src='item.order[1].goodsImages.path || "https://cgt.weikedashi.net/cgt/default.png"'></image>
			  <image v-if="item.order.length>2" class="goodsimg" :src='item.order[2].goodsImages.path || "https://cgt.weikedashi.net/cgt/default.png"'></image>
	          <view v-if="item.order.length==1" style="width: 410rpx;">
				  <view class='dish-title'>{{ item.order[0].productName}}&nbsp;&nbsp;|&nbsp;&nbsp;{{item.order[0].unit || '斤'}}</view>
				  <view class='detail-plus'>
				  {{ item.order[0].goodsInfo.detail || '测试详情测试详情测试详情测试详情测试详情测试详情' }}</view>
			  </view>
	          <view class="end">
	            <view class='price'>¥{{item.total/100}}</view>
	            <view class='time' style="text-align: end;">共{{item.order.length}}种商品</view>
	          </view>
	        </view>
	        <view class="flex-wrap flex-direction-row" style="margin-top: 10px">
	          <!-- <view v-if="item.status != 9" style="width:130px" /> -->
	          <!-- <button v-if="item.status != 9" :disabled="item.status < 3" @click="showRoute(index, item.shipper, item.kdcode)" class="route" > -->
			<!-- <button v-if="item.status != 9"  @click.stop="showRoute(index, item.shipper, item.kdcode)" class="route" >
	            查看物流
	          </button> -->
	
				<view style="flex:1" ></view>
				<view class="exception" :style="'background-color:'+colorMap[item.status]">
				{{statusMap[item.status]}}</view>
		
	            <!-- <button v-if="item.status == 1"    @click.stop="pay(item.id, item.money)" class="route confirm pay" 
	            hover-class="confirm-hover">付款</button> -->
	          
	            <!-- <button :disabled="item.status < 3"  @click.stop="confirm(item.id, index, item.status)" :class="['route', 'confirm', item.status == 4 ? 'comment' : '']" hover-class="confirm-hover">
	              确定收货</button> -->
	        </view>
	      </view>
	    
	    </block>
	  </scroll-view>
	</view>
</template>

<script> 
	export default {
		data() {
			return {
				list: [],
				triggered: false,
				tabIndex: 0,
				isIphoneX: this.$common.isIphoneX,
				statusMap : {1:"待确认", 2:"待发货", 3:"已发货", 4:"已完成"},
				colorMap : {1:"#ff5f19", 2:"#243771", 3:"#999900", 4:"#0a810a"}
			}
		},
		onLoad(options) {
			this.tabIndex= options.type
			this.requestData(false)
		},
		onShow() {
			this.requestData(false)
		},
		methods: {
			
			onScrollRefresh(){
				this.requestData(true)
			},
			
			tabFun(e) {
			    this.tabIndex= e
			    this.requestData(false)
			},
			
			  requestData: function(isRefresh){
			    if(isRefresh) this.triggered = true
			    let that = this
				var cid = uni.getStorageSync("userid")
				if (cid == '') return
			    var map = {
				    "customer_id": cid,
				    "delivery_date": "",  
				    "ctime": "",    
				    "sign_time": "",   
				    "total": "",  
				    "driver_name": "",   
				    "sales_name" : "",   
				    "customer_type": "",  
				    "product" : "",   
				    "origin":"",     
				    "current": 1,     
				    "size": 20,      
				    "order_no": "",    
				    "status": that.tabIndex == 0 ? null : that.tabIndex    
				}
				uni.request({
					url: that.$common.serverAddr +'/sales/order/list',
					data: map,
					method: 'POST',
					success: function(res) {
						console.log(res)
						if (isRefresh) {
							that.$uniApi.tipMsg('刷新成功')
							that.triggered= false
						}
						that.list = res.data.list
					},
					fail: function() {
						that.$uniApi.tipMsg('获取商品信息失败')
					}
				}) 
			  },
			
			  showRoute: function(i, ship, code){},
			 
			  pay: function(id, money){ },
			
			  // talkToCustomer(title, message, isBack) {
			  //   uni.showModal({
			  //     title: title,
			  //     showCancel: false,
			  //     content: message,
			  //     success: function (res) {
			  //       if (res.confirm && isBack) {
			  //         uni.navigateBack({ })
			  //       }
			  //     }
			  //   })
			  // },
			  
			showDetail: function(i){
				uni.navigateTo({
				  url: '../orderdetail/orderdetail?order='+encodeURIComponent(JSON.stringify(this.list[i]))
				})
			},
			
			del: function(id){
			  let that = this
			  uni.showModal({
			    title: '确定删除吗？',
			    success (res) {
			        if (res.confirm) {
					  uni.request({
					    url: that.$common.serverAddr +'/sales/order/info/del',
						data: {'id': id},
					    method: 'POST',
					    success: function(res) {
							that.$uniApi.tipMsg(res.data.message)
							if (res.data.status == 200) that.requestData(false)
					    }
					  })
			        } 
			      }
			  })
			}

		}
	}
</script>

<style>
@import url("orderlist.css");
</style>
